/**
 * 渲染一个基础物体
 */

import * as THREE from 'three'
import 'normalize.css'

console.log(THREE.REVISION)

// 1.初始化场景
const scene = new THREE.Scene()

// 2.创建相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)

// 3.设置相机位置
camera.position.set(0, 0, 10)

// 4.把相机添加到场景
scene.add(camera)

// 5.在场景中添加一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh)

// 6.初始化渲染器
const renderer = new THREE.WebGLRenderer({});
renderer.setSize(window.innerWidth, window.innerHeight)

// 7.将渲染的内容添加到 canvas 中
document.body.appendChild(renderer.domElement)

// 8.使用渲染器，通过相机把内容渲染出来
renderer.render(scene, camera)